<template>
  <div>
    <headerXX :name="title"></headerXX>
       <div class="ulbox">
    <div class="imgXX">
      <van-image
        class="img"
        radius="4"
        width="180"
        height="180"
        :src="dataIndex.image"
        mode=""
      >
      </van-image>

      <!-- <u--image class="img" height="350rpx" width="350rpx" :src="dataIndex.companyImage" :lazy-load="true">
					<template v-slot:loading>
						<u-loading-icon color="red"></u-loading-icon>
					</template>
				</u--image> -->
    </div>
     <div class="titleXX">
      <div
        class="WZ_size_20 paddingSX5 name"
        style="color: rgba(33, 84, 73, 1); text-align: left; font-weight: 700;"
      >
        {{ dataIndex.name }}
      </div>
    </div>
    <div
      class="paddingSX20 paddingBottom0"
      style="display: flex; align-items: center; padding-bottom: 0"
    >
      <van-image
        class="img"
        radius="4"
        width="20"
        height="16"
        :src="require('../../../../static/KSicon.png')"
        mode=""
      >
      </van-image>
      <div class="WZ_size_12 marginLeft5" style="font-weight: 700">推荐菜</div>
    </div>

    <div class="TJbox rich-text">
      <div
        class="TJli"
        v-for="(item, index) in dataIndex.categoryList"
        :key="index"
      >
        <div class="TJtop">{{ item.categoryName }}:</div>
        <div v-if="item.mealDishList.length > 0">
          <div v-for="(item2, index2) in item.mealDishList" :key="index2">
            {{ item2.name }}
          </div>
        </div>
        <div class="" v-else>暂无推荐菜</div>
      </div>
    </div>

    <div
      class="paddingSX20 paddingBottom0"
      style="display: flex; align-items: center; padding-bottom: 0; padding-top: 0"
    >
      <van-image
        class="img"
        radius="4"
        width="20"
        height="16"
        :src="require('../../../../static/KSicon.png')"
        mode=""
      >
      </van-image>
      <div class="WZ_size_12 marginLeft5" style="font-weight: 700">备注</div>
    </div>
    <div>
      <div class="rich-text" v-dompurify-html="dataIndex.text"></div>
    </div>
    <div
      class="paddingSX20"
      style="display: flex; align-items: center; padding-bottom: 10px"
    >
      <van-image
        class="img"
        radius="4"
        width="20"
        height="16"
        :src="require('../../../../static/KSicon.png')"
        mode=""
      >
      </van-image>
      <div class="WZ_size_12 marginLeft5" style="font-weight: 700">
        其他信息
      </div>
    </div>
    <div class="WZ_size_10 marginLeft5 paddingZY10" style="color: #333">
      <div class="WZ_size_14">取餐日期：{{ dataIndex.numTime }}</div>
      <div class="WZ_size_14">接龙开始时间：{{ dataIndex.startTime }}</div>
      <div class="WZ_size_14">接龙结束时间：{{ dataIndex.endTime }}</div>
    </div>
    <div
      class="paddingSX20"
      style="display: flex; align-items: center; padding-bottom: 10px"
    >
      <van-image
        class="img"
        radius="4"
        width="20"
        height="16"
        :src="require('../../../../static/KSicon.png')"
        mode=""
      >
      </van-image>
      <div class="WZ_size_12 marginLeft5" style="font-weight: 700">
        接龙菜单
      </div>
    </div>
    <div
      class="CPli"
      v-for="(item, index) in dataIndex.mealDishList"
      :key="index"
    >
      <div class="flex">
        <div>
          <van-image
            radius="10"
            width="80"
            height="80"
            :src="item.image"
            mode=""
          >
          </van-image>
        </div>
        <div class="marginLeft10">
          <div class="li_title">{{ item.name }}</div>
          <div class="li_yl" v-if="item.allNum == 0">余量：不限量</div>
          <div class="li_yl" v-else>余量：{{ item.surplusNum }}</div>
        </div>
      </div>
      <div class="li_felx">
        <div class="left"></div>
        <div class="right">
          ¥{{ item.price }}
          <!-- <van-stepper
                class="stepper"
                v-model="item.goodQty"
                theme="round"
                min="0"
                :max="item.productRemain"
                :default-value="0"
                @plus="valChange(item)"
                @minus="J(item)"
              /> -->
        </div>
      </div>
      <van-divider />
    </div>
  </div>
  </div>
</template>

<script>
import headerXX from "../../../../components/title.vue";
export default {
  components: { headerXX },
  data() {
    return {
      title: "接龙简介",
      dataIndex:{},
    };
  },
  created() {
     this.dataIndex=JSON.parse(decodeURIComponent(this.$route.query.XX))
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
@import "../../../../static/css/index.less";
@import "../../../../static/css/GYcSS.less";
@import "../../../../static/css/rich-text.css";
.ulbox {
  height: calc(
    var(--real-vh, 1vh) * 100 - 50px - env(safe-area-inset-bottom) -
      env(safe-area-inset-top)
  );
}

.imgXX {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  height: 160px;

  .img {
    height: 100%;
  }
}
.MZCPul {
  display: flex;

  padding-right: 10px;
  overflow-y: hidden;
  overflow-x: scroll;
}
.MZCPli {
  width: 33%;
  flex-shrink: 0;
  border-radius: 5px;
  font-weight: 600;
  margin-left: 10px;
}
.CPli {
  padding: 0 20px;
  // padding-bottom: 0px;
  .flex {
    display: flex;
    align-items: center;
  }
  .li_title {
    font-size: 16px;
    font-weight: 700;
  }
  .li_yl {
    font-size: 12px;
    color: rgb(128, 128, 128);
    margin: 5px 0;
  }
  .li_felx {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right {
      font-size: 20px;
      color: rgb(255, 141, 26);
    }
  }
}
.TJbox {
  color: rgb(102, 102, 102);
  font-size: 14px;
  // margin-top: 20px;
  .TJli {
    margin-bottom: 15px;
    line-height: 20px;
  }
  .TJtop {
  }
}
.name{
  padding-left: 10px;
  box-sizing: border-box;
}
</style>
